<template>
    <view>
        <uni-table border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
                <uni-th align="center" width="45%">名称</uni-th>
                <uni-th align="center" v-show="showMore">ip</uni-th>
                <uni-th align="center" v-show="showMore">mac</uni-th>
                <uni-th align="center" width="45%">操作</uni-th>
            </uni-tr>
            <uni-tr v-for="pc in wolList" :key="pc.id">
                <uni-td align="center" style="color: #227cca;">
                    <text @click="showInfo(pc)">{{ pc.name }}</text>
                </uni-td>
                <uni-td align="center" v-show="showMore">{{ pc.ip }}</uni-td>
                <uni-td align="center" v-show="showMore">{{ pc.mac }}</uni-td>
                <uni-td align="center">
                    <button type="primary" size="mini" @click="wol(pc)">唤起</button>
                    <button type="default" v-if="pc.ip" size="mini" @click="powerOff(pc)">关机</button>
                    <button v-if="pc.delete" type="warn" size="mini" @click="deleteOne(pc)">删除</button>
                </uni-td>
            </uni-tr>
        </uni-table>
        <view style="margin:20upx;"><button type="default" @click="diyChange">自定义唤起</button></view>
        <view v-show="diy" style="margin: 20upx;padding: 20upx;border: 1px solid #c2c2c2; border-radius: 10upx;">
            <uni-forms ref="form2"><uni-field label="唤起PHP" placeholder="" name="url" v-model="url" @blur="saveUrl" /></uni-forms>
            <uni-forms ref="form1" @submit="saveNewPc" @validate="validate1" @reset="reset1">
                <uni-field label="名称" placeholder="" v-model="saveOne.name" />
                <uni-field label="ip" placeholder="" v-model="saveOne.ip" />
                <uni-field label="mac" placeholder="" v-model="saveOne.mac" />
                <view style="display: flex;margin-top: 40upx;">
                    <button form-type="submit" type="primary" size="mini">保存</button>
                    <button form-type="reset" size="mini">重置</button>
                </view>
            </uni-forms>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            //显示ip和mac信息
            showMore: false,
            //待唤起的
            wolList: [],
            //唤起的支持php
            url: 'http://xxx.xxx.xxx:88/www/wol.php',
            saveOne: {
                name: '',
                ip: '',
                mac: ''
            },
            diy: false
        };
    },
    /**
     * 初始化加载
     * @param {Object} e
     */
    onLoad: function(e) {
        let _this = this;
        let wolPhpUrl = uni.getStorageSync('wolPhpUrl');
        if (wolPhpUrl) {
            this.url = wolPhpUrl;
        }
        //localStorage.removeItem('wolList')
        let locData = uni.getStorageSync('wolList');
        console.log('初始化数据', locData);
        if (locData) {
            for (let pc in locData) {
                if (locData[pc]) {
                    _this.wolList.push(locData[pc]);
                }
            }
        } else {
            let wolList = [
                {
                    id: 'wn nas',
                    name: '蜗牛星际nas',
                    ip: '192.168.123.111',
                    mac: '00:E0:B4:XX:XX:XX',
                    delete: true
                }
            ];
            _this.wolList = wolList;
            uni.setStorageSync('wolList', _this.wolList);
        }
        console.log(_this.wolList);
    },
    methods: {
        /**
         * 显示详情
         * @param {Object} pc
         */
        showInfo(pc) {
            let content = '服务器[' + pc.name + ']的ip为[' + pc.ip + '];mac为[' + pc.mac + ']';
            uni.showModal({
                title: '详情',
                content: content
            });
        },
        /**
         * 远程唤醒
         * @param {Object} pc
         */
        wol(pc) {
            let url = this.url + '?action=on&name=' + pc.name + '&mac=' + pc.mac;

            console.log('远程唤醒连接', url);

            //#ifdef H5
            window.open(url);
            return;
            //#endif
            uni.request({
                method: 'GET',
                url: url,
                success: function(result) {
                    if (result.statusCode == 200) {
                        let data = result.data;
                        console.log('远程唤醒返回', data);
                        let text = data.replace(/<br\/>/g, '\t\n');
                        uni.showModal({
                            title: '唤醒结果',
                            content: text,
                            showCancel: false
                        });
                    }
                }
            });
        },
        /**
         * 关机 关机是给电脑上的python服务发送的指令
         * @param {Object} pc
         */
        powerOff: function(pc) {
            let url = this.url + '?action=off&name=' + pc.name + '&ip=' + pc.ip + '&port=9999';

            console.log('远程关机连接', url);
            uni.showModal({
                title: '提示',
                content: '请确认是否远程关闭此电脑?',
                success: function(res) {
                    if (res.confirm) {
                        //#ifdef H5
                        window.open(url);
                        return;
                        //#endif
                        uni.request({
                            method: 'GET',
                            url: url,
                            success: function(result) {
                                if (result.statusCode == 200) {
                                    let data = result.data;
                                    console.log('远程关机醒返回', data);
                                    let text = data.replace(/<br\/>/g, '\t\n');
                                    uni.showModal({
                                        title: '关机结果',
                                        content: text,
                                        showCancel: false
                                    });
                                }
                            }
                        });
                    }
                }
            });
        },
        /**
         * 重置面板信息
         */
        reset1() {
            this.saveOne = {
                name: '',
                ip: '',
                mac: ''
            };
        },
        /**
         * 保存一条唤醒记录
         */
        saveNewPc() {
            let _this = this;
            console.log(this.saveOne);
            if (_this.saveOne.name == '') {
                uni.showToast({
                    icon: 'none',
                    title: '名称不能为空'
                });
                return;
            }
            if (_this.saveOne.mac == '') {
                uni.showToast({
                    icon: 'none',
                    title: 'MAC不能为空'
                });
                return;
            }
            let wolList = _this.wolList;
            wolList.push({
                id: this.saveOne.name + '_' + new Date().getTime(),
                name: this.saveOne.name,
                ip: this.saveOne.ip,
                mac: this.saveOne.mac,
                delete: true
            });
            _this.wolList = wolList;
            uni.setStorageSync('wolList', _this.wolList);
        },
        /**
         * 删除一个记录
         * @param {Object} pc
         */
        deleteOne(pc) {
            let _this = this;
            let wolList = [];
            for (let key in _this.wolList) {
                if (_this.wolList[key].id != pc.id) {
                    wolList.push(_this.wolList[key]);
                }
            }
            _this.wolList = wolList;
            uni.setStorageSync('wolList', _this.wolList);
        },
        /**
         * 保存唤起地址
         */
        saveUrl(e) {
            uni.setStorageSync('wolPhpUrl', this.url);
        },
        diyChange() {
            this.diy = !this.diy;
        }
    }
};
</script>

<style lang="scss" scoped>
.uni-table-td uni-button {
    margin-left: 10upx;
    margin-right: 10upx;
}
</style>
